﻿@using OPM.Class;
@using OPM.Class;
@using System.Web.Mvc;

@{
    Layout = "~/Views/Shared/_LayoutPopup.cshtml";
}

<div class="service_search_header">
    <div class="service_title">@Multi.customer</div>
</div>
<div class="service_box_table">
    <table id="service_table">
        <tr>
            <td>@Multi.is_secret</td>
            <td>
                <select id="cust_is_public">
                    <option value="">เลือก</option>
                    <option value="F">เปิดเผย</option>
                    <option value="T">ปกปิด</option>
                </select>
            </td>
            <td>@Multi.tel</td>
            <td>
                <input type="tel" name="tel" id="cust_tel" value="" />
                <div class="pin_add" onclick="addstrtotext('cust_tel','cust_tel_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.customer_type</td>
            <td>
                <select id="cust_type">
                    <option value="">เลือก</option>
                    <option value="C">บุคคล</option>
                    <option value="O">หน่วยงาน/องค์กร</option>
                    <option value="M">กลุ่มบุคคล</option>
                </select>
            </td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2" class="tdBottom">
                <textarea style="height: 48px;" id="cust_tel_all"></textarea>
                <div class="pin_del" style="top: -25px;" onclick="deltext('cust_tel_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.country</td>
            <td>
                @Html.DropDownList("cust_country_id", (SelectList)ViewBag.listOfCountry, "ประเทศ", null)
            </td>
        </tr>
        <tr>
            <td>@Multi.gender</td>
            <td>
                @Html.DropDownList("cust_gender_id", (SelectList)ViewBag.listOfGender, "เลือกเพศ", null)
            </td>
            <td>@Multi.mobile</td>
            <td>
                <input type="tel" name="tel" id="cust_mobile" value="" />
                <div class="pin_add" onclick="addstrtotext('cust_mobile','cust_mobile_all');"></div>
            </td>
        </tr>
        <tr>
            <td class="grouphide2">@Multi.title_name</td>
            <td class="grouphide2">
                <input name="title-name" type="text" id="cust_title" value=""></td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2" class="tdBottom">
                <textarea style="height: 48px;" id="cust_mobile_all"></textarea>
                <div class="pin_del" style="top: -25px;" onclick="deltext('cust_mobile_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.name</td>
            <td>
                <input type="text" name="name" id="cust_firstname" value=""></td>
        </tr>
        <tr>
            <td class="grouphide2">@Multi.lastname</td>
            <td class="grouphide2">
                <input type="text" name="title-name" id="cust_lastname" value=""></td>
            <td>@Multi.email</td>
            <td>
                <input type="text" name="tel" id="cust_email" value="" />
                <div class="pin_add" onclick="addstrtotext('cust_email','cust_email_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.citizen_id</td>
            <td>
                <input type="text" name="cust_citizen_id" id="cust_citizen_id" value=""></td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2" class="tdBottom">
                <textarea style="height: 48px;" id="cust_email_all"></textarea>
                <div class="pin_del" style="top: -25px;" onclick="deltext('cust_email_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.address</td>
            <td>
                <input type="text" name="title-name" id="cust_address" value="">
            </td>
        </tr>
        <tr>
            <td></td>
            <td><span class="note">@Multi.area</span></td>
        </tr>
         <tr id="tabProvince">
            <td>@Multi.province</td>
            <td>@Html.DropDownList("cust_province_id", (SelectList)ViewBag.listOfProvinces, "จังหวัด", null) </td>
        </tr>
        <tr id="tabDistricts">
            <td>@Multi.district</td>
            <td>@Html.DropDownList("cust_district_id", (SelectList)ViewBag.listOfDistricts, "อำเภอ", null)</td>
        </tr>
        <tr id="tabSubDistricts">
            <td>@Multi.subdistrict</td>
            <td>@Html.DropDownList("cust_subdistrict_id", (SelectList)ViewBag.listOfSubDistricts, "ตำบล", null)</td>
        </tr>
        <tr>
            <td class="grouphide1">@Multi.cont_number</td>
            <td class="grouphide1">
                <input type="text" name="title-name" id="cust_number" class="half-input" value="0">
                @Multi.people</td>
        </tr>
        <tr>
            @*<td></td>
            <td><a class="formBtn dBlock" data-block="defendant" href="@Url.Action("GetCrime", "Complaint")?a=country">จังหวัด/อำเภอ/ตำบล</a></td>*@
            <td class="grouphide2">@Multi.defective</td>
            <td class="grouphide2">
                <select id="cust_is_defective">
                    <option value="">เลือก</option>
                    <option value="T">ปกติ</option>
                    <option value="F">ผู้พิการ</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>@Multi.postcode</td>
            <td>
                <input type="text" name="title-name" id="cust_postcode" value=""></td>
            <td rowspan="2">@Multi.remark</td>
            <td rowspan="2" class="tdBottom">
                <textarea style="height: 48px;" id="cust_remark"></textarea>
            </td>
        </tr>
        <tr>
           <td class="grouphide2">@Multi.birthdate</td>
            <td class="grouphide2">
                @*<input type="text" name="date_opened" id="date_opened" class="date-input"
                       value="@(Model.bi.HasValue?
                       Model.date_opened.Value.ToString("dd/MM/yyyy",new System.Globalization.CultureInfo("en-US")):"")" />*@
                <input type="date" name="date-input" class="date-input" id="cust_birthday" value="" /></td>
        </tr>
    </table>
</div>
<div class="BoxServiceBottom">
    <div class="BoxServiceActionPrev floatL" onclick="parent.$.fn.colorbox.close();">@Multi.Cancel</div>
    <div class="BoxServiceActionNext floatR" onclick="sendCustomerDataToParent();">@Multi.add</div>
    <div class="clear"></div>
</div>

<script src="~/js/jquery-ui.min.js"></script>

<script>

    var locationToRedirect = '';

    $(document).ready(function () {
        $("#cust_type").change(function () {
            var myType = $(this).val();
            if (myType == 'C') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', true);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', false);
                $(".grouphide1").css('color', '#aaa');
                $(".grouphide2").css('color', '#000');
                $(".grouphide1 img").css('opacity', '0');
                $(".grouphide2 img").css('opacity', '1');
            } else if (myType == 'O') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', true);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#aaa');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '0');
            } else if (myType == 'M') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', true);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#aaa');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '0');
            } else {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', false);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#000');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '1');
            }
        });
        $("#cust_country_id").change(function () {
            var Country = $("#cust_country_id option:selected").text();

            if (Country == 'ไทย') {
                $("#tabProvince , #tabDistricts , #tabSubDistricts").show();
            } else {
                $("#tabProvince , #tabDistricts , #tabSubDistricts").hide();
            }
        });
        $("#cust_province_id").change(function () {
            var url = "@Url.Content("~/Complaint/GetDistrictsJson")?provinceId=" + $(this).val();
                $.getJSON(url)
                  .done(function (json) {
                      $('#cust_district_id').html('');
                      $.each(json, function (i, data) {
                          $('#cust_district_id').append(
                              '<option value="' + data.Id + '">' + data.Name + '</option>'
                          );
                      }
                  )
                  })
                  .fail(function (jqxhr, textStatus, error) {
                      var err = textStatus + ", " + error;
                      console.log("Request Failed: " + err);
                  });
            });


            $("#cust_district_id").change(function () {
                var url = "@Url.Content("~/Complaint/GetSubDistrictsJson")?districtId=" + $(this).val();
                $.getJSON(url)
                  .done(function (json) {
                      $('#cust_subdistrict_id').html('');
                      $.each(json, function (i, data) {
                          $('#cust_subdistrict_id').append(
                              '<option value="' + data.Id + '">' + data.Name + '</option>'
                          );
                      }
                  )
                  })
                  .fail(function (jqxhr, textStatus, error) {
                      var err = textStatus + ", " + error;
                      console.log("Request Failed: " + err);
                  });
            });
            $("#cust_subdistrict_id").change(function () {
                locationToRedirect += $("#cust_subdistrict_id option:selected").text() + " ";
                locationToRedirect += $("#cust_district_id option:selected").text() + " ";
                locationToRedirect += $("#cust_province_id option:selected").text() + " ";
                locationToRedirect += $("#cust_country_id option:selected").text();
                parent.addTextLocation2(locationToRedirect);
                console.log(locationToRedirect);
                
            });
    });

    //$("#cust_type").change(function () {
    //    var custType =  $("#cust_type");
    //    if (custType == "C") {
    //        $("#cust_number").prop('readonly', true);
    //    }
    //    if (custType == "O" || custType == "M") {

    //        $("#cust_title").prop('readonly', true);
    //        $("#cust_lastname").prop('readonly', true);
    //        $("#cust_birthday").prop('readonly', true);
    //    }
    //});

    function sendCustomerDataToParent() {

        var cust_is_public = $("#cust_is_public").val();
        parent.$("#cust_is_public").val(cust_is_public); //ปกปิดข้อมูล

        var cust_tel_all = $("#cust_tel_all").val();
        parent.$("#cust_tel_all").val(cust_tel_all); //โทรศัพท์

        var cust_country_id = $("#cust_country_id").val();
        parent.$("#cust_country_id").val(cust_country_id); //ประเทศ

        var cust_type = $("#cust_type").val();//ประเภทบุคคล
        parent.$("#cust_type").val(cust_type);

        var cust_gender_id = $("#cust_gender_id").val();
        parent.$("#cust_gender_id").val(cust_gender_id); //เพศ

        var cust_mobile_all = $("#cust_mobile_all").val();
        parent.$("#cust_mobile_all").val(cust_mobile_all); //โทรศัพท์เคลื่อนที่

        var cust_title = $("#cust_title").val(); //คำนำหน้าชื่อ
        parent.$("#cust_title").val(cust_title);

        var cust_firstname = $("#cust_firstname").val();
        parent.$("#customer").val(cust_firstname);

        var cust_lastname = $("#cust_lastname").val();
        parent.$("#cust_lastname").val(cust_lastname); //นามสกุล

        var cust_email_all = $("#cust_email_all").val();
        parent.$("#cust_email_all").val(cust_email_all); //อีเมล์

        var cust_citizen_id = $("#cust_citizen_id").val();
        parent.$("#cust_citizen_id").val(cust_citizen_id); //บัตรประชาชน

        var cust_address = $("#cust_address").val();
        parent.$("#cust_address").val(cust_address); //ที่อยู่

        var cust_province_id = $("#cust_province_id").val();
        parent.$("#cust_province_id").val(cust_province_id); //จังหวัด

        var cust_district_id = $("#cust_district_id").val();
        parent.$("#cust_district_id").val(cust_district_id); //อำเภอ

        var cust_subdistrict_id = $("#cust_subdistrict_id").val();
        parent.$("#cust_subdistrict_id").val(cust_subdistrict_id); //ตำบล

        var cust_is_defective = $("#cust_is_defective").val();
        parent.$("#cust_is_defective").val(cust_is_defective); //ประเภทผู้พิการ

        var cust_postcode = $("#cust_postcode").val();
        parent.$("#cust_postcode").val(cust_postcode); //รหัสไปรษณีย์

        var cust_number = $("#cust_number").val();
        parent.$("#cust_number").val(cust_number); //จำนวน

        var cust_remark = $("#cust_remark").val();
        parent.$("#cust_remark").val(cust_remark); //หมายเหตุ

        var cust_birthday = $("#cust_birthday").val();
        parent.$("#cust_birthday").val(cust_birthday); //วันเกิด

        var cust_contact_detail = $("#cust_contact_detail").val();
        parent.$("#cust_contact_detail").val(cust_contact_detail);

        var cust_contact_detail = "";
       

        parent.$.fn.colorbox.close();
     
    }

        function addstrtotext(boxinput, boxoutput) {
            var str = $('#' + boxinput).val();
            var str2 = $('#' + boxoutput).val();
            if (str2 != '') {
                str = str2 + ',' + str;
            } else {
                str = str
            }
            $('#' + boxoutput).val(str);
            $('#' + boxinput).val('').focus();
        }
        function deltext(boxoutput) {
            $('#' + boxoutput).val('');
        }
</script>
